<!DOCTYPE HTML>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
  <title>消息</title>
  <link rel="stylesheet" type="text/css" href="../css/aui.css">
  <link rel="stylesheet" type="text/css" href="../css/aui-slide.css">
  <link rel="stylesheet" type="text/css" href="../css/aui-flex.css">
  <link rel="stylesheet" type="text/css" href="../css/index.css">
  <link rel="stylesheet" type="text/css" href="../css/common.css">
  <style type="text/css">

    body {
      -webkit-overflow-scrolling: touch;
    }

    html,
    body {
      overflow-x: hidden;
    }

    body {
      background: #ffffff;
    }

    #header {
        background: #fff;
    }

    #header .aui-bar {
        background: transparent;
        color: #000;
        border-bottom: 1px solid #ccc;
    }

    #header .aui-bar .aui-btn .aui-icon-left {
        color: #000;
    }
    .aui-tab-item {
      letter-spacing: 1px;
      color: #666666;
    }

    .aui-tab-item.aui-active {
      color: #fe417b;
      border-bottom: none;
      position: relative;
    }

    .aui-tab-item.aui-active:before {
      position: absolute;
      left: 50%;
      top: 0;
      content: '';
      border-bottom: 0.16rem solid #fe417b;
      width: 3.2rem;
      height: 1.8rem;
      margin-left: -1.6rem;
    }

    .messageList {
      width: 100%;
      overflow: hidden;
    }

    .list_box {
      width: 100%;
      border-bottom: 0.13rem solid #EFEFEF;
      overflow: hidden;
      padding: 0.8rem 0;
    }

    .list_title {
      color: #FE417B;
      width: 100%;
      display: flex;
      align-items: center;
    }

    .list_title div {
      display: inline-block;
      width: 0.28rem;
      height: 0.28rem;
      border-radius: 50%;
      margin: 0 0.28rem;
    }

    .list_title p {
      display: inline-block;
      font-size: 0.58rem;
    }

    .read>div {
      background: #666666;
    }

    .read>p {
      color: #666666;
    }

    .Unread>div {
      background: #FE417B;
    }

    .Unread>p {
      color: #FE417B;
    }

    .message_detail {
      width: 100%;
      padding: 0.66rem 0.66rem;
      color: #666666;
      font-size: 0.59rem;
    }

    .message_time {
      width: 100%;
      padding: 0 0.66rem;
      color: #666666;
      font-size: 0.59rem;
    }
  </style>
</head>

<body>

  <div id="header">
      <header class="aui-bar aui-bar-nav">
          <a class="aui-pull-left aui-btn" onclick="closeWin();">
              <span class="aui-iconfont aui-icon-left"></span>
          </a>
          <div class="aui-title">消息</div>
      </header>
  </div>



  <div class="aui-tab" id="tab">
    <div class="aui-tab-item aui-active">系统消息</div>
    <div class="aui-tab-item">我的消息</div>
  </div>
  <div class="messageList" id="messageList">

  </div>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/zepto.min.js"></script>
<script type="text/javascript" src="../script/aui-tab.js"></script>
<script type="text/javascript" src="../script/doT.min.js"></script>
<script type="text/javascript" src="../script/common.js"></script>
<script type="text/javascript">
  var messageItem;
  var dataSYS = [];
  var dataUSER = [];
  var tab;
  apiready = function () {
    messageItem = doT.template($api.text($api.byId('messageItem')));
    getList()
  }

  new auiTab({
    element: document.getElementById("tab"),
    index: 1,
    repeatClick: false
  }, function (ret) {
    if(ret.index=='1'){
      $api.html($api.byId('messageList'), messageItem(dataSYS));
    }
    if(ret.index=='2'){
      $api.html($api.byId('messageList'), messageItem(dataUSER));
    }
  });

  function getList() {
    _Ajax('http://v2.zhengouduo.com/app/msg/record?uid=100023&token=e490fe09b40975a7aa4c41cfea0bdede', 'get', {},
      'json',
      function (ret) {
        if (ret.code === 1) {
          var data = ret.data.record_list
          for (var i = 0; i < data.length; i++) {
            if(data[i].type === 'SYS'){
              dataSYS.push(data[i])
            }else if(data[i].type === 'USER'){
              dataUSER.push(data[i])
            }
          }
          $api.html($api.byId('messageList'), messageItem(data));
        } else {
          $api.html($api.byId('messageList'), '');
        }
      });
  }
</script>
<script id="messageItem" type="text/x-dot-template">
  {{ for (var key in it){ }}
    <div class="list_box">
      <div class="list_title read">
        <div></div>
        <p>{{= it[key]['title'] }}</p>
      </div>
      <div class="message_detail">
          {{= it[key]['content'] }}
      </div>
      <div class="message_time">{{= it[key]['sent_time'] }}</div>
    </div>
  {{ } }}
</script>

</html>
